<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>car</title>
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.js"></script>
    <link rel="stylesheet"
          href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="./tmpl.js"></script>
    <style>
        .form-control {
            width: 600px;
            padding: 6px 0;
        }

        .carPlate {
            width: 600px;
            top: 30px;
            max-height: 300px;
            border-radius: 4px;
            padding: 0;
        }

        .car-nav {
            list-style: none;
            height: 28px;
            line-height: 28px;
            border-bottom: 3px solid #ddd;
            padding-left: 0;
        }

        .car-nav li {
            float: left;
            font-size: 14px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            width: 20%;
        }

        .car-nav li a {
            display: block;
            height: 100%;
            text-align: center;
            text-decoration: none;
            font-size: 14px;
        }

        .car-nav li.active a,
        .car-nav li:hover a {
            border-bottom: 3px solid #1E79E2;
            background: #fff;
            color: #1e79e2;
        }

        .carPlateList {
            max-height: 240px;
            overflow: auto;
        }

        .carPlate .btn-sure {
            height: 34px;
            font-size: 15px;
            background-color: #1890FF;
            color: #fff;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-color: transparent;
            border-radius: 4px;
            width: 100%;
        }

        .carPlate .attr-list dt {
            color: #E51C1C;
            border: none;
            width: 20px;
            height: 20px;
            text-indent: 6px;
        }

        .attr-list {
            display: table;
            margin-bottom: 0;
        }

        .attr-list-body,
        .attr-list-head {
            display: table-cell;
        }

        .attr-list-body label {
            padding: 3px 6px;
            cursor: pointer;
            font-weight: normal;
            display: inline-block;
        }

        .attr-list-body label.active {
            background: #2FABEC;
            color: #fff;
        }

        .carWrap .car-selected {
            display: inline-block;
            background: #ededed;
            padding: 0px 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            white-space: nowrap;
            position: relative;
            margin: 0 2px;
        }
    </style>
    <script>
        //车辆品牌
        var brands = {
            "A": [{ id: "001", title: "奥迪", image: "ad.png" },
            { id: "002", title: "阿尔法罗密欧", image: "aeflmo.jpg" },
            { id: "088", title: "奥兹莫比尔", image: "aozimobier.jpg" },
            { id: "003", title: "阿斯顿马丁", image: "asidunmadin.jpg" }],
            "B": [{ id: "004", title: "奔驰", image: "bc.png" },
            { id: "005", title: "宝马", image: "bm.png" },
            { id: "126", title: "奔腾", image: "benteng.png" },
            { id: "006", title: "宾利", image: "bl.png" },
            { id: "007", title: "布嘉迪", image: "bujiadi.jpg" },
            { id: "008", title: "保时捷", image: "bsj.png" },
            { id: "009", title: "别克", image: "bk.png" },
            { id: "010", title: "本田", image: "bt.png" },
            { id: "011", title: "标致", image: "bz.png" },
            { id: "012", title: "比亚迪", image: "byd.png" },
            { id: "013", title: "北汽", image: "beiqi.jpg" },
            { id: "014", title: "宝骏", image: "bj.png" },
            { id: "015", title: "宝腾", image: "baoteng.png" },
            { id: "142", title: "北京汽车", image: "beijingqc.png" },
            { id: "801", title: "宝龙", image: "baolong.png" }],
            "C": [{ id: "016", title: "长城", image: "changcheng.jpg" },
            { id: "017", title: "长安", image: "changan.jpg" },
            { id: "018", title: "长丰", image: "changfeng.jpg" },
            { id: "019", title: "昌河", image: "changhe.jpg" },
            { id: "020", title: "川汽野马", image: "chuanqi.jpg" }],
            "D": [{ id: "021", title: "东风", image: "df.png" },
            { id: "023", title: "大发", image: "dafa.jpg" },
            { id: "024", title: "帝豪", image: "dihao.jpg" },
            { id: "025", title: "东南", image: "dongnan.jpg" },
            { id: "026", title: "道奇", image: "daoqi.png" },
            { id: "027", title: "大众", image: "dz.png" },
            { id: "028", title: "大宇", image: "dayu.png" },
            { id: "029", title: "大迪", image: "dadi.jpg" }],
            // "E":[],
            "F": [{ id: "030", title: "法拉利", image: "fll.png" },
            { id: "033", title: "福特", image: "ft.png" },
            { id: "022", title: "风神", image: "fengshen.png" },
            { id: "035", title: "菲亚特", image: "feiyate.jpg" },
            { id: "036", title: "福田", image: "futian.jpg" },
            { id: "135", title: "飞虎", image: "blank.png" },
            { id: "037", title: "福迪", image: "fudi.jpg" },
            { id: "038", title: "富奇", image: "blank.png" },
            { id: "031", title: "丰田", image: "fengtian.png" }],
            "G": [{ id: "039", title: "广汽", image: "gq.png" },
            { id: "040", title: "GMC", image: "gmc.png" },
            { id: "041", title: "光冈", image: "gg.png" },
            { id: "806", title: "观致", image: "guanzhi.png" }],
            "H": [{ id: "032", title: "皇冠", image: "huangguan.jpg" },
            { id: "134", title: "华阳", image: "blank.png" },
            { id: "042", title: "海马", image: "haima.png" },
            { id: "043", title: "哈飞", image: "hafei.jpg" },
            { id: "044", title: "悍马", image: "hm.png" },
            { id: "045", title: "霍顿", image: "huodun.jpg" },
            { id: "046", title: "华普", image: "huapu.jpg" },
            { id: "047", title: "华泰", image: "huatai.jpg" },
            { id: "048", title: "红旗", image: "hongqi.jpg" },
            { id: "049", title: "黄海", image: "huanghai.jpg" },
            { id: "050", title: "汇众", image: "huizhong.jpg" },
            { id: "146", title: "黑豹", image: "heibao.png" },
            { id: "850", title: "华北", image: "huabei.png" }],
            // "I":[],
            "J": [{ id: "051", title: "捷豹", image: "jiebao.jpg" },
            { id: "052", title: "吉普", image: "jp.png" },
            { id: "053", title: "金杯", image: "jinbei.jpg" },
            { id: "054", title: "江淮", image: "jianghuai.jpg" },
            { id: "055", title: "吉利", image: "jili.jpg" },
            { id: "056", title: "江铃", image: "jianglin.jpg" },
            { id: "057", title: "江南", image: "jiangnan.jpg" },
            { id: "058", title: "吉奥", image: "jiao.png" },
            { id: "059", title: "解放", image: "jiefang.png" },
            { id: "060", title: "九龙", image: "jiulong.png" },
            { id: "812", title: "金龙", image: "jinlong.jpg" },
            { id: "811", title: "金程", image: "jincheng.png" },
            { id: "813", title: "金旅", image: "jinlv.png" }],
            "K": [{ id: "062", title: "凯迪拉克", image: "kdlk.png" },
            { id: "063", title: "克莱斯勒", image: "kelaisilei.jpg" },
            { id: "064", title: "柯尼塞格", image: "blank.png" },
            { id: "065", title: "开瑞", image: "kairui.jpg" },
            { id: "066", title: "KTM", image: "blank.png" },
            { id: "067", title: "克尔维特", image: "keerweite.png" },
            { id: "814", title: "凯马", image: "kaima.png" },
            { id: "815", title: "凯翼", image: "kaiyi.png" }],
            "L": [{ id: "068", title: "兰博基尼", image: "lbjn.png" },
            { id: "069", title: "劳斯莱斯", image: "lsls.png" },
            { id: "070", title: "路虎", image: "lh.png" },
            { id: "099", title: "罗森", image: "luoshen.png" },
            { id: "100", title: "罗孚", image: "luofu.png" },
            { id: "071", title: "莲花", image: "lianhua.jpg" },
            { id: "072", title: "林肯", image: "lk.png" },
            { id: "073", title: "雷克萨斯", image: "lkss.png" },
            { id: "074", title: "铃木", image: "lm.png" },
            { id: "075", title: "雷诺", image: "leiruo.jpg" },
            { id: "076", title: "力帆", image: "lifang.jpg" },
            { id: "077", title: "陆风", image: "lufeng.jpg" },
            { id: "078", title: "理念", image: "linian.jpg" }],
            "M": [{ id: "079", title: "迈巴赫", image: "mbh.png" },
            { id: "080", title: "名爵", image: "mingjue.jpg" },
            { id: "081", title: "迷你", image: "mn.png" },
            { id: "082", title: "玛莎拉蒂", image: "msld.jpg" },
            { id: "083", title: "马自达", image: "mzd.png" },
            { id: "818", title: "美亚", image: "meiya.png" }],
            "N": [{ id: "084", title: "纳智捷", image: "nazhijie.jpg" },
            { id: "096", title: "日产", image: "rc.png" },
            { id: "085", title: "南汽", image: "nanqi.png" }],
            "O": [{ id: "086", title: "欧宝", image: "ob.png" },
            { id: "087", title: "讴歌", image: "og.png" },
            { id: "136", title: "欧朗", image: "ol.png" }],
            "P": [{ id: "089", title: "帕加尼", image: "pojiani.png" },
            { id: "090", title: "庞蒂克", image: "blank.png" }],
            "Q": [{ id: "091", title: "奇瑞", image: "qirui.jpg" },
            { id: "092", title: "起亚", image: "qy.png" },
            { id: "093", title: "全球鹰", image: "quanqiuying.jpg" },
            { id: "094", title: "庆铃", image: "qinling.jpg" },
            { id: "095", title: "启辰", image: "qichen.jpg" }],
            "R": [{ id: "097", title: "瑞麒", image: "ruilin.jpg" },
            { id: "098", title: "荣威", image: "rongwei.jpg" }],
            "S": [{ id: "101", title: "萨博", image: "sabo.png" },
            { id: "102", title: "斯巴鲁", image: "sbl.png" },
            { id: "103", title: "双环", image: "shuanghuang.jpg" },
            { id: "104", title: "世爵", image: "shijue.jpg" },
            { id: "105", title: "斯派朗", image: "blank.png" },
            { id: "106", title: "三菱", image: "sanling.jpg" },
            { id: "107", title: "双龙", image: "sl.png" },
            { id: "108", title: "smart", image: "smart.png" },
            { id: "109", title: "斯柯达", image: "sikeda.jpg" },
            { id: "137", title: "双龙", image: "shuanglong.png" },
            { id: "138", title: "思铭", image: "siming.png" },
            { id: "826", title: "陕汽", image: "shanqi.png" },
            { id: "828", title: "上汽", image: "shangqi.png" }],
            "T": [{ id: "110", title: "塔塔", image: "tata.jpg" },
            { id: "111", title: "土星", image: "tuxing.png" },
            { id: "139", title: "天马", image: "tiamma.png" }],
            //"U":[],
            //"V":[],
            "W": [{ id: "112", title: "沃尔沃", image: "woerwo.jpg" },
            { id: "113", title: "威麟", image: "weilin.jpg" },
            { id: "114", title: "五菱", image: "wuling.jpg" },
            { id: "115", title: "威兹曼", image: "wzm.png" },
            { id: "116", title: "沃克斯豪尔", image: "erao.png" },
            { id: "117", title: "五十铃", image: "ISUZU.png" }],
            "X": [{ id: "118", title: "现代", image: "xd.png" },
            { id: "119", title: "雪佛兰", image: "xfl.png" },
            { id: "120", title: "夏利", image: "xiali.jpg" },
            { id: "121", title: "雪铁龙", image: "xtl.png" },
            { id: "122", title: "西亚特", image: "xyt.png" }],
            "Y": [{ id: "123", title: "英菲尼迪", image: "yfnd.png" },
            { id: "127", title: "跃进", image: "yuejin.jpg" },
            { id: "128", title: "依维柯", image: "IVECO.png" },
            { id: "842", title: "永源", image: "yongyuan.jpg" },
            { id: "124", title: "英伦", image: "yinlun.jpg" },
            { id: "840", title: "野马", image: "yema.jpg" },
            { id: "125", title: "一汽", image: "yiqi.jpg" },
            { id: "839", title: "羊城", image: "yangcheng.png" },
            { id: "841", title: "英致", image: "yingzhi.png" }],
            "Z": [{ id: "130", title: "中华", image: "zhonghua.jpg" },
            { id: "131", title: "众泰", image: "zhongtai.jpg" },
            { id: "132", title: "中兴", image: "zhongxin.jpg" },
            { id: "133", title: "中顺", image: "zhongshun.jpg" },
            { id: "845", title: "中国重汽", image: "zgzhongqi.png" }]
        };
    </script>
</head>

<body>
    <dd class="carWrap"
        carPlateAttr="Plate1"
        id="vehicleBrand">
        <div class="form-control carPlateInput"
             data-toggle="dropdown">
            <span>请选择车辆品牌</span>
            <i class="carPlateInputBtn icon-btn-car iconfont icon-arrow-down btn-carPlate"></i>
        </div>
        <input type="hidden"
               class="ppdm">
        <div class="dropdown-menu carPlate car-dropdown-menu">
            <ul class="car-nav">
                <li class="carPlateLetter active"><a>ABCD</a></li>
                <li class="carPlateLetter"><a>FGHJ</a></li>
                <li class="carPlateLetter"><a>KLMN</a></li>
                <li class="carPlateLetter"><a>OPQRST</a></li>
                <li class="carPlateLetter"><a>WXYZ</a></li>
            </ul>
            <div class="carPlateList"></div>
            <button class="carListBtn btn-sure">确定</button>
        </div>
    </dd>
    <script type="text/x-tmpl"
            id="carPlateListTmpl">
        {% for(var i in o) { %}
        <dl class="attr-list">
        <dt class="attr-list-head" >{%= i %}</dt>
        <dd class="attr-list-body">
        {% for ( var j = 0; j < o[i].length; j++) { %}
        <label class="car-item" plateCode="{%=o[i][j].id %}">{%= o[i][j].title %}</label>
        {% } %}
        </dd>
        </dl>
        {% } %}
        </script>
    <script type="text/x-tmpl"
            id="carSeriesListTmpl">
        {% for ( var i = 0; i < o.length; i++) { %}+
        <li><a carplatecode = {%=o[i].ZPPDM %}>{%=o[i].CLPP %}</a></li>
        {% } %}
        </script>
    <script type="text/x-tmpl"
            id="carYearListTmpl">
        {% for ( var i = 0; i < o.length; i++) { %}
        <li><a carplatecode ={%= o[i].CODE %} >{%=o[i].MODEL_NAME %}</a></li>
        {% } %}
        </script>
    <script>
        $(function () {
            initCarEvents();
            initCarData('ABCD');
        });

        var Name = [];
        var abc;
        var arr = [];
        function initCarEvents() {
            //品牌字母切换展示
            $(".carPlateLetter").click(function () {
                $(this).addClass('active').siblings().removeClass('active');
                flag = $(this).find("a").html();
                initCarData(flag);
                var aa = ($(this).parent().parent().find(".carPlateList dl dd label"));
                for (var i = 0; i < Name.length; i++) {
                    for (var j = 0; j < aa.length; j++) {
                        if (Name[i] == aa[j].innerHTML) {
                            aa[j].classList.add("active");
                        }
                    }
                }
            });

            //车辆品牌的点击事件
            $('body').on('click', '.carPlate label', function () {
                var $this = $(this);
                if ($this.hasClass('active')) {
                    $this.removeClass('active');
                } else {
                    var $carplate = $(this).parents('.carPlateList').eq(0);
                    if ($carplate.hasClass('carPlateOnlyOne')) {
                        $carplate.find('.car-item').removeClass('active');
                        Name = [];
                    }
                    $this.addClass('active');
                }
                if ($this.hasClass("active") && Name.indexOf($this.text()) < 0) {
                    Name.push($this.text())
                } else {
                    Name.splice($.inArray($this.text(), Name), 1);
                }
            });

            //保存选中的车牌
            $('body').on('click', '.carListBtn', function () {
                var $this = $(this),
                    carSelectedHtml = "",
                    plateCode = "";
                    plateName = "",
                    carPlateAttr = $this.parents('.carWrap').attr('carPlateAttr'),
                    $carPlateInput = $this.parents('.carWrap').find('.carPlateInput'),
                    plateCodeAttr = $carPlateInput.find('span').attr('plateName'),
                    $items = $this.siblings(".carPlateList").find("label.active"),
                    $ppdm = $this.parents('.carWrap').find('.ppdm');



                for (var i = 0; i < Name.length; i++) {
                    if (i == 0) {
                        plateName = Name[i];
                    } else {
                        plateName += "," + Name[i];
                    }
                    var brandCode;
                    $.each($items, function (index, element) {
                        if (index == i) {
                            brandCode = $(this).attr('plateCode');
                            if (!plateCode) {
                                plateCode += brandCode;
                            } else {
                                plateCode += "," + brandCode;
                            }

                        }
                        });

                        carSelectedHtml += '<div class="car-selected" plateCode=' + brandCode + ' plateName=' + Name[i] + '>' + Name[i] + '<span class="close">×</span></div>';
                    }
                carSelectedHtml += '<i class="carPlateInputBtn icon-btn-car icon-list3 btn-carPlate icon-car001"></i>'

                //选择的车牌项目为0
                if (Name.length <= 0) {
                    carSelectedHtml = '请选择车辆品牌<i class="carPlateInputBtn icon-btn-car icon-list3 btn-carPlate icon-car001"></i>'
                    $carPlateInput.html('carSelectedHtml');

                } else if (Name.length == 1) {//单选

                } else {//多选
                }
                $carPlateInput.html(carSelectedHtml).attr('plateCode', plateCode);
                $ppdm.val(plateCode);
                $this.parents('.carWrap').removeClass('open');
            });

            //阻止下拉事件
            $('body').on('click', '.car-dropdown-menu', function () {
                return false;
            });

            //点击删除品牌
            $("body").on("click", ".close", function (event) {
                var $this = $(this),
                    carPlateAttr = $this.parents('.carWrap').attr('carPlateAttr'),
                    $carPlateInput = $('[carplateattr="' + carPlateAttr + '"]').find('.carPlateInput');
                //从Name数组移除元素
                Name.splice($.inArray($this.parent().attr("plateName"), Name), 1);
                deleteItem($this.parent().attr("plateName"));
                if ($(".car-selected").length == 0) {
                    $carPlateInput.html('请选择车辆品牌<i class="carPlateInputBtn icon-btn-car icon-list3 btn-carPlate"></i>');
                } else if ($(".car-selected").length == 1) {
                    var plateName = $(".car-selected").attr("platename"),
                        plateCode = $(".car-selected").attr("plateCode"),
                }
                var str = "";
                var ppdmCode = "";
                var arr = $(".carPlateInput .car-selected");
                for (var i = 0; i < arr.length; i++) {
                    if (i < arr.length - 1) {
                        str += arr[i].innerText.slice(0, -1) + ",";
                        ppdmCode += $(arr[i]).attr("platecode") + ",";
                    }
                    else {
                        str += arr[i].innerText.slice(0, -1)
                        ppdmCode += $(arr[i]).attr("platecode");
                    }
                }
                $('.ppdm').val(ppdmCode);
                event.stopPropagation();
                $('.carWrap').removeClass('open');
            })



            //update by baojunfeng 2018-07-20 11:45:00, 移除年代款的选择
            //子系列选择 的确定按钮点击事件
            $('.carSeriesListBtn').click(function () {

                var arrCarS = [], zpps = [];
                var $this = $(this),
                    $carWrap = $(".carWrap"),
                    $carSeriesList = $carWrap.find('.carSeriesList'),
                    $carSeriesInput = $carWrap.find('.carSeriesInput'),
                    $carYearInput = $this.parents('.carPlate').find('.carYearInput'),
                    $carYearList = $this.parents('.carPlate').find('.carYearList'),
                    $zppdm = $carWrap.find('.zppdm');
                if ($this.attr('disabled') == 'disabled') {
                    return;
                }


                $carSeriesList.find('li.active').each(function () {
                    arrCarS.push($(this).find('a').html());
                    zpps.push($(this).find('a').attr("carplatecode"));
                });

                var carString = arrCarS.join(",");
                var zppCode = zpps.join(",");
                $carSeriesInput.html(carString).attr('title', carString);
                $zppdm.val(zppCode);
                $carWrap.removeClass('open');
            });

            //选择按钮
            $('.carPlateInputBtn').click(function (event) {
                $carPlateInput = $(this).parents('.carWrap').find('.carPlateInput'),
                    $carPlateInput.click();
                event.stopPropagation();
            });

        }


        function initCarData(letter) {
            var carData = brands;
            var initdata = {};
            for (var i = 0; i < letter.length; i++) {
                if (carData[letter[i]]) {
                    initdata[letter[i]] = carData[letter[i]];
                }
            }
            $(".carPlateList").html(tmpl("carPlateListTmpl", initdata));
        }
        // var brand;
        // function initCarData(letter){
        //     UI.control.remoteCall('vehicle/getPpdmData',{},function(resp){
        //         brand=resp.ret;
        //         var carData = resp.ret;
        //         var initdata = {};
        //         for( var i = 0; i < letter.length;i++){
        //             if(carData[letter[i]]){
        //                 initdata[letter[i]] = carData[letter[i]];
        //             }
        //         }

        //         $(".carPlateList").html(tmpl("carPlateListTmpl",initdata));
        //     });
        // }

        function initCarDataByValue(brandId, seriesId, yearId, callback) {
            var _carData = brand;
            Name.length = 0;
            var _group = ['ABCD', 'FGHJ', 'KLMN', 'OPQRST', 'WXYZ'];
            var _prop;
            var _tempStr = "ABCD";
            var _tempIndex = 0;
            var plateName;
            var plateCode;
            var $carPlateInput = $('.carWrap .carPlateInput');
            for (var prop in _carData) {
                for (var i = 0; i < _carData[prop].length; i++) {
                    if (brandId == _carData[prop][i].id) {
                        _prop = prop;
                        plateCode = _carData[prop][i].id;
                        plateName = _carData[prop][i].title;
                        Name.push(plateName);
                        break;
                    }
                }
            }
            for (var j = 0; j < _group.length; j++) {
                var _str = _group[j];
                if (_str.indexOf(_prop) >= 0) {
                    _tempIndex = j;
                    _tempStr = _str;
                    break;
                }
            }
            initCarData(_tempStr);
            //设置品牌
            if (!plateCode) {
                var carSelectedHtml = '';
                carSelectedHtml += '<div class="car-selected" plateCode=' + plateCode + ' plateName=' + brandId + '>' + brandId + '<span class="close">×</span></div>';
                carSelectedHtml += '<i class="carPlateInputBtn icon-btn-car icon-list3 btn-carPlate icon-car001"></i>'
                $carPlateInput.html(carSelectedHtml);
                $('.ppdm').val(brandId);
            } else {
                $.each($('.carPlateList label'), function () {
                    if ($(this).attr('platecode') == plateCode) {
                        $('.carPlateList label').removeClass('active');
                        var carSelectedHtml = '';
                        carSelectedHtml += '<div class="car-selected" plateCode=' + plateCode + ' plateName=' + plateName + '>' + plateName + '<span class="close">×</span></div>';
                        carSelectedHtml += '<i class="carPlateInputBtn icon-btn-car icon-list3 btn-carPlate icon-car001"></i>'
                        $carPlateInput.html(carSelectedHtml);
                        $(this).addClass('active');
                        $carPlateInput = $('.carWrap .carPlateInput');
                        $('.ppdm').val(brandId);
                    }
                })
            }

            $('.carPlateLetter').removeClass('active').eq(_tempIndex).addClass('active');
            //获取子系列
            if (!plateCode) {
                $('.car-series-input').removeAttr('disabled');
                $('.carSeriesInput').html(seriesId);
                $('.zppdm').val(seriesId);
                $('.carSeriesList').html(tmpl("carSeriesListTmpl", ''));
            } else {
                var seriesData = getZppDataByName(plateName);

                $('.carSeriesList').html(tmpl("carSeriesListTmpl", seriesData));
                $('.car-series-input').removeAttr('disabled');
                $('.carSeriesInput').html(seriesId);
                $("#carSeriesCode").find("li>a").each(function (index, item) {
                    var $item = $(item);
                    if ($item.attr("carplatecode") == seriesId) {
                        $('.carSeriesInput').html($item.html());
                        $item.parent("li").addClass("active");
                    }
                })
                $('.zppdm').val(seriesId);
                var yearCode;
                var _props;
                for (var prop2 in seriesData) {
                    if (seriesId == seriesData[prop2].SUBBRAND_NAME) {
                        _props = prop2;
                        yearCode = seriesData[prop2].CODE;
                        break;
                    }

                }
            }
            yearCode = yearCode ? yearCode : '';
            if (yearCode == '') {
                $('.carYearInput').html(yearId);
                $('.ymdm').val(yearId);
                $('.carYearList').html(tmpl("carYearListTmpl", ''));
            } else {
                $.each($('.carSeriesList li a'), function () {
                    if ($(this).attr('carplatecode') == yearCode) {
                        $('.carSeriesList li').removeClass('active');
                        $(this).parent('li').addClass('active');
                    }
                })
                var seriesData = getZppYearBycode(yearCode);
                $('.carYearList').html(tmpl("carYearListTmpl", seriesData));
                $('.carYearInput').html(yearId);
                $('.ymdm').val(yearId)
                $.each($('.carYearList li a'), function () {
                    if ($(this).text() == yearId) {
                        $('.carYearList li').removeClass('active');
                        $(this).parent('li').addClass('active');
                    }
                })
            }

            if (typeof callback == 'function') {
                callback();
            }

        }
        /**
         * @description 根据中文值，回显车辆品牌
         */
        function initCarDataByChineseValue(carLogo, carBrand, callback) {

            var _carData = brand;
            Name.length = 0;

            var _group = ['ABCD', 'FGHJ', 'KLMN', 'OPQRST', 'WXYZ'];
            var _prop;
            var _tempStr = "ABCD";
            var _tempIndex = 0;
            var plateName;
            var plateCode;
            var $carPlateInput = $('.carWrap .carPlateInput');
            for (var prop in _carData) {
                for (var i = 0; i < _carData[prop].length; i++) {
                    if (carLogo == _carData[prop][i].title) {
                        _prop = prop;
                        plateCode = _carData[prop][i].id;
                        plateName = _carData[prop][i].title;
                        Name.push(plateName);
                        break;
                    }
                }
            }
            for (var j = 0; j < _group.length; j++) {
                var _str = _group[j];
                if (_str.indexOf(_prop) >= 0) {
                    _tempIndex = j;
                    _tempStr = _str;
                    break;
                }
            }
            initCarData(_tempStr);
            //设置品牌
            if (!plateCode) {
                var carSelectedHtml = '';
                carSelectedHtml += '<div class="car-selected" plateCode=' + plateCode + ' plateName=' + plateName + '>' + plateName + '<span class="close">×</span></div>';
                carSelectedHtml += '<i class="carPlateInputBtn icon-btn-car icon-list3 btn-carPlate icon-car001"></i>'
                $carPlateInput.html(carSelectedHtml);
                $('.ppdm').val(plateName);
            } else {
                $.each($('.carPlateList label'), function () {
                    if ($(this).attr('platecode') == plateCode) {
                        $('.carPlateList label').removeClass('active');
                        var carSelectedHtml = '';
                        carSelectedHtml += '<div class="car-selected" plateCode=' + plateCode + ' plateName=' + plateName + '>' + plateName + '<span class="close">×</span></div>';
                        carSelectedHtml += '<i class="carPlateInputBtn icon-btn-car icon-list3 btn-carPlate icon-car001"></i>'
                        $carPlateInput.html(carSelectedHtml);
                        $(this).addClass('active');
                        $carPlateInput = $('.carWrap .carPlateInput');
                        $('.ppdm').val(plateCode);
                    }
                })
            }

            $('.carPlateLetter').removeClass('active').eq(_tempIndex).addClass('active');
            //获取子系列
            if (!plateCode) {
                $('.car-series-input').removeAttr('disabled');
                $('.carSeriesInput').html("");
                $('.zppdm').val("");
                $('.carSeriesList').html(tmpl("carSeriesListTmpl", ''));
            } else {
                var seriesData = getZppDataByName(plateName);
                var seriesId = [];
                $('.carSeriesList').html(tmpl("carSeriesListTmpl", seriesData));
                $('.car-series-input').removeAttr('disabled');
                $('.carSeriesInput').html("");
                $("#carSeriesCode").find("li>a").each(function (index, item) {
                    var $item = $(item);
                    if ($item.html() == carBrand) {
                        $('.carSeriesInput').html($item.html());
                        $item.parent("li").addClass("active");
                        seriesId.push($item.attr("carplatecode"));

                    }
                })

                $('.zppdm').val(seriesId.join(","));


            }
            if (typeof callback == 'function') {
                callback();
            }

        }
        function sortCarFirstLetterFun() {
            var firstLetter;
            var sortCarList = {
                'A': [], 'B': [], 'C': [], 'D': [], 'E': [], 'F': [], 'G': [], 'H': [],
                'I': [], 'J': [], 'K': [], 'L': [], 'M': [], 'N': [], 'O': [], 'P': [], 'Q': [],
                'R': [], 'S': [], 'T': [], 'U': [], 'V': [], 'W': [], 'X': [], 'Y': [], 'Z': []
            };
            for (var i in carPlate) { //遍历json对象的每个key/value对,p为key
                if (isChn(carPlate[i])) {
                    firstLetter = ConvertPinyin(carPlate[i]).substring(0, 1);
                } else {
                    firstLetter = carPlate[i].substring(0, 1).toUpperCase();
                }
                var obj = {};
                obj[i] = carPlate[i];
                sortCarList[firstLetter].push(obj);
            }
            for (var L in sortCarList) {
                if (!sortCarList[L].length) {
                    delete sortCarList[L];
                }
            }
            return sortCarList;
        }

        //根据品牌名称获取子品牌
        function getZppDataByName(name) {
            // var ret = {};
            // UI.control.remoteCall('vehicle/getZppByName',{'name':name},function(resp){
            //     if(resp.ret) {
            //         ret = resp.ret;
            //     }
            // });
            // return ret;
            return []
        }
        // 根据品牌code获取子品牌
        function getZppDataByCode(code) {
            // var ret = {};
            // UI.control.remoteCall('vehicle/getZppByCode',{'code':code},function(resp){
            //     if(resp.ret) {
            //         ret = resp.ret;
            //     }
            // });
            // return ret;
            return []
        }

        //根据子品牌code获取年代款
        function getZppYearBycode(zppCode) {
            // var ret={};
            // UI.control.remoteCall('vehicle/getZppYearBycode',{'zppCode':zppCode},function(resp){
            //     if(resp.ret) {
            //         ret = resp.ret;
            //     }
            // });
            // return ret;
            return []
        }
        //删除品牌
        function deleteItem(platName) {
            $(".car-selected[platename='" + platName + "']").remove();
            $(".car-item").each(function (index, item) {
                if ($(item).text() == platName) {
                    $(item).removeClass("active");
                }
            })
        }
        //根据被选中的车牌，设置显示以及选中样式
        function setElectedCar(arr) {
            var carInputHtml = "";
            for (var i = 0; i < arr.length; i++) {
                carInputHtml += '<div class="car-selected" platename="奥迪">奥迪<span class="close">×</span></div>';
            }
        }

    </script>
</body>

</html>